<template>
  <div class="orderDetail">
    <PageTitle title="订单详情"></PageTitle>
    <div class="top">
      <div class="step">
        <van-steps :active="stepActive" active-color="#25c9c3">
          <template v-if="orderDetail && orderDetail._status._type == -1">
            <van-step>已付款</van-step>
            <van-step>退款中</van-step>
            <van-step>商家审核</van-step>
          </template>
          <template v-if="!orderDetail || orderDetail._status._type != -1">
            <van-step>待付款</van-step>
            <van-step>待发货</van-step>
            <van-step>待收货</van-step>
            <van-step>待评价</van-step>
            <van-step>已完成</van-step>
          </template>
        </van-steps>
      </div>
      <transition name="van-slide-down">
        <div class="status" v-show="orderDetail">
          {{ orderDetail && orderDetail._status._msg }}
        </div>
      </transition>
    </div>
    <div class="skeleton" v-if="!orderDetail">
      <van-skeleton title :row="6" />
      <van-skeleton title :row="3" />
    </div>
    <div class="cart" v-if="orderDetail">
      <div class="title">共{{ orderDetail.cartInfo.length }}件商品</div>
      <div class="cartList">
        <div
          class="card"
          v-for="item in orderDetail.cartInfo"
          :key="item.id"
          @click="$router.push('/detail/' + item.productInfo.id)"
        >
          <van-card
            :num="item.cart_num"
            :price="item.truePrice"
            :desc="item.productInfo.attrInfo.suk"
            :title="item.productInfo.store_name"
            :thumb="item.productInfo.image"
          />
        </div>
      </div>
    </div>
    <div class="address" v-if="orderDetail">
      <div class="title">订单信息</div>
      <div class="info">
        <div class="info_t">
          <span class="name">收货人：{{ orderDetail.real_name }}</span>
          <span class="phone">{{ orderDetail.user_phone }}</span>
        </div>
        <div class="info_b">收货地址：{{ orderDetail.user_address }}</div>
      </div>
    </div>
    <div class="orderInfo" v-if="orderDetail">
      <div class="infoList">
        <van-cell
          title="订单编号"
          :value="orderDetail.order_id"
          clickable
          @click="copyOrderId"
        />
        <van-cell title="下单时间" :value="orderDetail._add_time" clickable />
        <van-cell title="订单类型" value="普通订单" clickable />
        <van-cell
          title="订单状态"
          :value="orderDetail._status._title"
          clickable
        />
        <van-cell
          title="支付方式"
          :value="orderDetail._status._payType"
          clickable
          v-if="orderDetail._status._type != 0"
        />
      </div>
    </div>
    <div class="payInfo" v-if="orderDetail">
      <div class="infoList">
        <van-cell title="商品总价" :value="orderDetail.total_price" clickable />
        <van-cell title="运费" :value="orderDetail.total_postage" clickable />
      </div>
      <div class="payInfo_b">
        支付金额：<span>{{ orderDetail.pay_price }}</span>
      </div>
    </div>
    <div
      class="bottomBar"
      v-if="orderDetail && orderDetail._status._type != -1"
    >
      <template v-if="orderDetail._status._type == 0">
        <van-button
          round
          color="#25c9c3"
          v-if="orderDetail._status._type == 0"
          plain
          @click="confirmOrder"
          >取消订单</van-button
        >
        <van-button round color="#25c9c3" @click="showPayType = true"
          >立即付款</van-button
        >
      </template>
      <van-button
        v-if="orderDetail._status._type != 0"
        round
        color="#25c9c3"
        plain
        @click="$router.push(`/order/refund/${orderDetail.order_id}`)"
        >申请退款</van-button
      >
    </div>
    <div
      class="bottomSpace"
      v-if="orderDetail && orderDetail._status._type != -1"
    ></div>
    <input
      type="text"
      class="copyOrderId"
      ref="copyOrderId"
      v-if="orderDetail"
      :value="orderDetail.order_id"
    />
    <van-share-sheet
      class="payType"
      v-model="showPayType"
      :options="payOptions"
      title="选择支付方式"
      @select="selectPayType"
    />
  </div>
</template>

<script>
import PageTitle from "@/components/PageTitle";
import { mapMutations } from "vuex";
export default {
  name: "OrderDetail",
  data() {
    return {
      orderDetail: null,
      showPayType: false,
      payOptions: [
        { name: "微信支付", icon: require("../assets/images/pay_weixin.png") },
        { name: "余额支付", icon: require("../assets/images/pay_yue.png") },
      ],
    };
  },
  props: ["orderId"],
  components: {
    PageTitle,
  },
  computed: {
    stepActive() {
      if (!this.orderDetail) return -1;
      let type = this.orderDetail._status._type;
      return type == -1 ? 1 : type;
    },
  },
  created() {
    this.getOrderDetail();
  },
  methods: {
    ...mapMutations(["changeLoading"]),
    getOrderDetail() {
      this.changeLoading(true);
      this.$axios.get(`/api/order/detail/${this.orderId}`).then((d) => {
        this.changeLoading(false);
        console.log("order/detail", d.data);
        if (d.data.status == 200) {
          this.orderDetail = d.data.data;
        } else if (d.data.status == 410000) {
          this.$toast.fail("请重新登录");
          this.$store.commit("loginOut");
          this.$router.push("/login");
        } else {
          this.$toast.fail(d.data.msg);
          if (window.history.length <= 1) {
            this.$router.push("/");
          } else {
            this.$router.go(-1);
          }
        }
      });
    },
    confirmOrder() {
      this.$dialog
        .confirm({
          title: "确认取消订单么？",
          confirmButtonColor: "#25c9c3",
        })
        .then(() => {
          this.cancelOrder();
        })
        .catch(() => {});
    },
    cancelOrder() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "请求中...",
      });
      this.$axios
        .post("/api/order/cancel", {
          id: this.orderDetail.order_id,
        })
        .then((d) => {
          console.log("order/cancel", d.data);
          if (d.data.status == 200) {
            this.$toast.success("取消订单成功");
            this.$router.go(-1);
          } else {
            this.$toast.fail(d.data.msg);
          }
        });
    },
    selectPayType(option) {
      this.showPayType = false;
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "请求中...",
      });
      this.$axios
        .post("/api/order/pay", {
          paytype: option.name == "微信支付" ? "weixin" : "yue",
          uni: this.orderDetail.order_id,
        })
        .then((d) => {
          console.log("order/pay", d.data);
          if (d.data.status == 200) {
            this.$toast.success("支付成功");
            this.getOrderDetail();
          } else {
            this.$toast.fail(d.data.msg);
          }
        });
    },
    copyOrderId() {
      let input = this.$refs["copyOrderId"];
      input.select();
      input.setSelectionRange(0, 9999);
      if (document.execCommand("Copy")) {
        this.$toast("订单编号已复制");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.orderDetail {
  margin-bottom: 15px;
  & > div .title {
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
  }
  .top {
    .step {
      padding: 0 20px;
      position: relative;
      z-index: 9;
      background: #fff;
    }
    .status {
      padding-bottom: 10px;
      font-size: 14px;
      text-align: center;
      color: #969799;
      background: #fff;
    }
  }
  .skeleton {
    padding: 0 20px;
    .van-skeleton {
      padding: 30px 0;
    }
  }
  .cart {
    margin-top: 15px;
    .cartList {
      .card {
        padding: 0 20px;
        background: #fff;
        &:active {
          background: #f2f3f5;
        }
        &:not(:first-child) .van-card {
          border-top: 1px solid #f5f5f5;
        }
        .van-card {
          padding: 15px 0;
          background: inherit;
          .van-card__thumb {
            height: 75px;
            width: 75px;
          }
          .van-card__content {
            min-height: 75px;
          }
        }
      }
    }
  }
  .address {
    background: #fff;
    margin-top: 15px;
    .info {
      padding: 15px 20px;
      font-size: 13px;
      line-height: 25px;
      position: relative;
      &:active {
        background: #f2f3f5;
      }
      .info_t {
        display: flex;
        justify-content: space-between;
      }
      .info_b {
        color: #868686;
      }
      &::before {
        content: "";
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2px;
        background: repeating-linear-gradient(
          -45deg,
          #ff6c6c 0,
          #ff6c6c 20%,
          rgba(0, 0, 0, 0) 0,
          rgba(0, 0, 0, 0) 25%,
          #1989fa 0,
          #1989fa 45%,
          rgba(0, 0, 0, 0) 0,
          rgba(0, 0, 0, 0) 50%
        );
        background-size: 80px;
      }
    }
  }
  .orderInfo {
    margin-top: 15px;
    .infoList {
      .van-cell {
        padding: 10px 20px;
      }
    }
  }
  .payInfo {
    margin-top: 15px;
    .infoList {
      .van-cell {
        padding: 10px 20px;
      }
    }
    .payInfo_b {
      padding: 0 20px;
      line-height: 45px;
      text-align: right;
      font-size: 14px;
      background: #fff;
      border-top: 1px solid #f5f5f5;
      span {
        color: #25c9c3;
        font-weight: bold;
        font-size: 15px;
      }
    }
  }
  .bottomSpace {
    height: 50px;
  }
  .bottomBar {
    height: 50px;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    position: fixed;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 999;
    left: 0;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #f5f5f5;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.01);
    .van-button {
      height: 30px;
      margin-left: 15px;
    }
  }
  .copyOrderId {
    position: fixed;
    top: -9999px;
    left: -9999px;
    opacity: 0;
  }
}
</style>